<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多图片上传</title>
    <style>
        html {
            font-size: 12px;
        }
        
        .inputClass {
            margin-top: 10px;
        }
        
        .changeColor {
            color: red;
        }
    </style>
    <script>
        function createDiv() {
            let div = document.createElement("div");
            let node = document.createElement("input");
            node.setAttribute("type", "file"); //node.type='file';
            node.classList.add("inputClass");
            div.appendChild(node);
            let button = document.createElement("button");
            button.innerHTML = "-";
            div.appendChild(button);
            return div;
        }

        function subPhotoFile(event) {
            if (event.target.tagName.toLowerCase() == 'button') {
                event.target.parentNode.parentNode.removeChild(event.target.parentNode);
                let numNode = document.getElementById("count");
                let count = Number.parseInt(numNode.value);
                numNode.value = --count;
                document.getElementById("msg").classList.remove("changeColor");
            }
        }

        function addPhotoFile() {
            let numNode = document.getElementById("count");
            if (numNode.value < 5) {
                let insertPoint = document.getElementById("insertPoint")
                insertPoint.appendChild(createDiv());
                let count = Number.parseInt(numNode.value);
                numNode.value = ++count;
            } else {
                document.getElementById("msg").classList.add("changeColor");
            }
        }

        function init() {
            document.getElementById("btnAdd").addEventListener("click", addPhotoFile, false);
            document.getElementById("insertPoint").addEventListener("click", subPhotoFile, false);
        }
        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    <section>
        <nav id="msg">一次最多上传五张图片</nav>
        <input type="file" class="inputClass"><button type="button" id="btnAdd">+</button>
        <article id="insertPoint"></article>
        <div class="inputClass">
            <button type="button">上传</button>
        </div>
    </section>
    <input type="hidden" id="count" value="1">
</body>

</html>